<template>
  <el-dialog
    title="查看订单"
    :visible.sync="isShow"
    width="80%"
    center
    class="inProcessInfo"
  >
    <div class="title-two">
      国知局状态: <span class="font_success">{{ orderData.status }}</span>
    </div>
    <div class="inProcessInfo-content">
      <el-row>
        <el-col :span="12">专利名称：{{ orderData.name }}</el-col>
        <el-col :span="12"
          >专利类型：{{
            orderData.type == "F"
              ? "发明专利"
              : orderData.type == "S"
              ? "实用新型"
              : "外观设计"
          }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12">订单编号：{{ orderData.order_number }}</el-col>
        <el-col :span="12"
          >订单状态：<font :color="orderData.status == '撤案' ? 'red' : 'green'">{{
            orderData.status
          }}</font></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12">申请号：{{ orderData.application_number }}</el-col>
        <el-col :span="12">申请机构：{{ orderData.organization }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12"
          >专利权人：{{ orderData.order && orderData.order.patent_user }}</el-col
        >
        <el-col :span="12"
          >发明人姓名：{{ orderData.order && orderData.order.user_name }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12"
          >身份证号：{{ orderData.order && orderData.order.id_card }}</el-col
        >
        <el-col :span="12"
          >联络人：
          <span
            v-if="
              !(
                orderData.change_consumer_operation &&
                orderData.change_consumer_operation.length
              )
            "
          >
            <span v-if="orderData.order">{{ orderData.order.liaisons }}</span>
          </span>
          <p
            v-else
            v-for="(item, index) in orderData.change_consumer_operation"
            :key="index"
          >
            <span class="font_grayness">{{ JSON.parse(item.operation_record).old }}</span>
            ->
            <span class="font_success">{{ JSON.parse(item.operation_record).new }}</span>
          </p>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12"
          >联络人邮箱：{{ orderData.order && orderData.order.liaisons_email }}</el-col
        >
        <el-col :span="12"
          >联络人电话：{{ orderData.order && orderData.order.liaisons_tel }}</el-col
        >
      </el-row>
      <el-row>
        <!-- <el-col :span="12"></el-col> -->
        <el-col :span="24" v-if="orderData.process"
          >专属顾问：{{ orderData.process | processNumber }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12"
          >受理通知书：
          <div v-if="orderData.acceptance_note_file" class="fileBox">
            <a
              v-for="item in orderData.acceptanceFiles"
              :key="item.id"
              :href="baseUrl + '/api/download?path=' + item.file + '/' + item.path"
              :download="item.path"
              :title="item.path"
              class="el-icon-tickets file_sh"
            ></a>
          </div>
        </el-col>
        <el-col :span="12"
          >缴费通知书：
          <div v-if="orderData.demand_note_file" class="fileBox">
            <a
              v-for="item in orderData.demandFiles"
              :key="item.id"
              :href="baseUrl + '/api/download?path=' + item.file + '/' + item.path"
              :download="item.path"
              :title="item.path"
              class="el-icon-tickets file_sh"
            ></a>
          </div>
          <div v-if="orderData.demand_note_seal_file" class="fileBox">
            <a
              v-for="item in orderData.demandNoteDealFile"
              :key="item.id"
              :href="baseUrl + '/api/download?path=' + item.file + '/' + item.path"
              :download="item.path"
              :title="item.path"
              class="el-icon-tickets file_sh"
            ></a>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12"
          >审查文件：
          <div v-if="orderData.opinion_file" class="fileBox">
            <a
              v-for="item in orderData.opinionFiles"
              :key="item.id"
              :href="baseUrl + '/api/download?path=' + item.file + '/' + item.path"
              :download="item.path"
              :title="item.path"
              class="el-icon-tickets file_sh"
            ></a>
          </div>
        </el-col>
        <el-col :span="12"
          >答复文件：
          <div v-if="orderData.answer_file" class="fileBox">
            <a
              v-for="item in orderData.answerFiles"
              :key="item.id"
              :href="baseUrl + '/api/download?path=' + item.file + '/' + item.path"
              :download="item.path"
              :title="item.path"
              class="el-icon-tickets file_sh"
            ></a>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12"
          >初审通知书：
          <div
            v-if="orderData.extension_file && orderData.extension_file.cs_file"
            class="fileBox"
          >
            <!-- <a
              :href="
                baseUrl +
                '/api/download?path=' +
                orderData.extension_file.cs_file
              "
              class="el-icon-tickets file_sh"
            >
            </a> -->
            <a
              v-for="(item, index) in orderData.extension_file.cs_file.split('&')"
              :key="index"
              :href="baseUrl + '/api/download?path=' + item"
              :download="item"
              :title="item"
              class="el-icon-tickets file_sh"
            ></a>
          </div>
        </el-col>
        <el-col :span="12"
          >实审通知书：
          <div
            v-if="orderData.extension_file && orderData.extension_file.ss_file"
            class="fileBox"
          >
            <a
              v-for="(item, index) in orderData.extension_file.ss_file.split('&')"
              :key="index"
              :href="baseUrl + '/api/download?path=' + item"
              :download="item"
              :title="item"
              class="el-icon-tickets file_sh"
            ></a>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12"
          >办登通知书：
          <div
            v-if="orderData.extension_file && orderData.extension_file.bd_file"
            class="fileBox"
          >
            <a
              v-for="(item, index) in orderData.extension_file.bd_file.split('&')"
              :key="index"
              :href="baseUrl + '/api/download?path=' + item"
              :download="item"
              :title="item"
              class="el-icon-tickets file_sh"
            ></a>
          </div>
        </el-col>
        <el-col :span="12"
          >授权通知书：
          <div
            v-if="orderData.extension_file && orderData.extension_file.sq_file"
            class="fileBox"
          >
            <a
              v-for="(item, index) in orderData.extension_file.sq_file.split('&')"
              :key="index"
              :href="baseUrl + '/api/download?path=' + item"
              :download="item"
              :title="item"
              class="el-icon-tickets file_sh"
            ></a>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12"
          >驳回通知书：
          <div
            v-if="orderData.extension_file && orderData.extension_file.bh_file"
            class="fileBox"
          >
            <a
              v-for="(item, index) in orderData.extension_file.bh_file.split('&')"
              :key="index"
              :href="baseUrl + '/api/download?path=' + item"
              :download="item"
              :title="item"
              class="el-icon-tickets file_sh"
            ></a>
          </div>
        </el-col>
        <el-col :span="12"
          >专利证书：
          <div v-if="orderData.cert_file" class="fileBox">
            <a
              v-for="item in orderData.certFile"
              :key="item.id"
              :href="baseUrl + '/api/download?path=' + item.file + '/' + item.path"
              :download="item.path"
              :title="item.path"
              class="el-icon-tickets file_sh"
            ></a>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      isShow: false,
      value: "",
      baseUrl: global.baseurl,
      fileType: null,
      detailFile: null,
      orderData: {},
      id: null,
    };
  },
  watch: {},
  methods: {
    show(data) {
      this.id = data.id;
      this.init();
    },
    init() {
      this.$axios.get(`api/finals/${this.id}/show`).then((res) => {
        if (res.data.code == 200) {
          this.orderData = res.data.data;
          this.sortingFile(this.orderData);
          this.isShow = true;
        } else {
          this.$alert(res.data.message, "提示", {
            confirmButtonText: "确定",
            callback: (action) => {},
          });
        }
      });
    },
    sortingFile(data) {
      if (data.acceptance_note_file) {
        data.acceptanceFiles = [];
        let reviewfile = data.acceptance_note_file.split("&");
        for (let j in reviewfile) {
          let itemobj = {
            id: j + 1,
            path: reviewfile[j],
            file: "",
          };
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.acceptanceFiles.push(itemobj);
        }
      }
      if (data.demand_note_file) {
        data.demandFiles = [];
        let reviewfile = data.demand_note_file.split("&");
        for (let j in reviewfile) {
          let itemobj = {
            id: j + 1,
            path: reviewfile[j],
            file: "",
          };
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.demandFiles.push(itemobj);
        }
      }
      if (data.demand_note_seal_file) {
        data.demandNoteDealFile = [];
        let reviewfile = data.demand_note_seal_file.split("&");
        for (let j in reviewfile) {
          let itemobj = {
            id: j + 1,
            path: reviewfile[j],
            file: "",
          };
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.demandNoteDealFile.push(itemobj);
        }
      }
      if (data.opinion_file) {
        data.opinionFiles = [];
        let reviewfile = data.opinion_file.split("&");
        for (let j in reviewfile) {
          let itemobj = {
            id: j + 1,
            path: reviewfile[j],
            file: "",
          };
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.opinionFiles.push(itemobj);
        }
      }
      if (data.answer_file) {
        data.answerFiles = [];
        let reviewfile = data.answer_file.split("&");
        for (let j in reviewfile) {
          let itemobj = {
            id: j + 1,
            path: reviewfile[j],
            file: "",
          };
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.answerFiles.push(itemobj);
        }
      }
      if (data.cert_file) {
        data.certFile = [];
        let reviewfile = data.cert_file.split("&");
        for (let j in reviewfile) {
          let itemobj = {
            id: j + 1,
            path: reviewfile[j],
            file: "",
          };
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.certFile.push(itemobj);
        }
      }
      if (data.extension_file) data.extension_file = JSON.parse(data.extension_file);
    },
  },
};
</script>

<style lang="less">
.inProcessInfo {
  &-content {
    margin-top: 10px;
    .el-row {
      .el-col {
        border: 1px solid #ccc;
        line-height: 40px;
        padding-left: 10px;
      }
    }
  }

  .title-two {
    width: 100%;
    text-align: center;
    font-size: 20px;
  }
  .fileBox {
    display: inline-block;
    // line-height: 40px;
    .file_sh {
      font-size: 24px;
      vertical-align: sub;
    }
  }
}
</style>
